<template>
    <div class="water">
        <div class="qs" :style="{height: curHeight + 'px'}">
            <div class="leftMain">
                <div class="table" :style="{height: tableHeight + 'px'}">
                    <tableHeightIndex
                        :dataSource="dataSource"
                        :tableColumns="tableColumns"
                        :btnList="btnList"
                        :pageSize="pageSize"
                        :pageCount="pageCount"
                        :pageNo="pageNo"
                        btnListWidth="60"
                        :selection="false"
                        :height="tableRealHeight"
                    ></tableHeightIndex>
                </div>
                <div class="ysb" :style="{height: tableHeight + 'px'}">
                    <div class="item">
                        <div class="name">日营收</div>
                        <div class="money">16.5</div>
                        <div class="jsrContent">
                            <div class="jsr">
                                <label>较上日</label>
                                <span class="up">
                                    <img src="@/assets/images/data/up.png" />
                                    10.2
                                </span>
                            </div>
                            <div class="jsr">
                                <label>环比</label>
                                <span class="up"> <img src="@/assets/images/data/up.png" /> 53.3% </span>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="name">月营收</div>
                        <div class="money">165.5</div>
                        <div class="jsrContent">
                            <div class="jsr">
                                <label>较上月</label>
                                <span class="up">
                                    <img src="@/assets/images/data/up.png" />
                                    10.2
                                </span>
                            </div>
                            <div class="jsr">
                                <label>环比</label>
                                <span class="up"> <img src="@/assets/images/data/up.png" /> 53.3% </span>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="name">年营收</div>
                        <div class="money">1957.2</div>
                        <div class="jsrContent">
                            <div class="jsr">
                                <label>较上年</label>
                                <span class="down">
                                    <img src="@/assets/images/data/down.png" />
                                    10.2
                                </span>
                            </div>
                            <div class="jsr">
                                <label>环比</label>
                                <span class="up"> <img src="@/assets/images/data/up.png" /> 53.3% </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="rightMain">
                <moneyPieEcharts></moneyPieEcharts>
            </div>
        </div>
        <div class="echarts" :style="{height: curHeight + 'px', padding: '10px', position: 'relative'}">
            <div class="rightTitle" style="position: relative; right: 30px">
                <span>充值走势对比分析</span>
                <label> <i class="el-icon el-icon-upload2 download"></i>&nbsp;&nbsp;导出 </label>
                <label> <i class="el-icon el-icon-printer printer"></i>&nbsp;&nbsp;打印 </label>
            </div>
            <img src="@/assets/images/controlCenter/refresh.png" class="refresh" />
            <moneyBarEcharts :height="curBarHeight"></moneyBarEcharts>
        </div>
    </div>
</template>

<script>
import moneyBarEcharts from "./moneyBarEcharts"
import tableHeightIndex from "@/components/customComponents/customeTable/tableHeightIndex.vue"
import {moneyTable} from "@/mockData/monitorCenter"
import moneyPieEcharts from "./moneyPieEcharts"
export default {
    props: ["type"],
    components: {
        moneyBarEcharts,
        tableHeightIndex,
        moneyPieEcharts
    },
    data() {
        return {
            dataSource: moneyTable,
            tableColumns: [
                {
                    prop: "projectName",
                    label: "项目"
                },
                {
                    prop: "money",
                    label: "分表总能耗"
                },
                {
                    prop: "percent",
                    label: "占比"
                }
            ],
            btnList: [],
            pageSize: 20,
            pageCount: 100,
            pageNo: 1,
            tableRealHeight: (document.body.clientHeight - 130) / 4 + 48,
            tableHeight: (document.body.clientHeight - 130) / 4 + 50,
            curHeight: (document.body.clientHeight - 130) / 2,
            curBarHeight: (document.body.clientHeight - 130) / 2 - 10
        }
    },

    methods: {}
}
</script>

<style scoped>
.water{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.qs {
    display: flex;
    gap: 10px;
    .leftMain {
        width: 50%;
        background-color: #fff;
        .table {
        }
        .ysb {
            display: flex; /* flex布局 */
            justify-content: flex-start; /* 左对齐 */
            flex-wrap: wrap; /* 换行 */
            margin-top: 10px;
            gap: 5px;
            padding: 6px;
            .item {
                width: calc((100% - 30px) / 3);
                height: 100px;
                border-radius: 8px;
                border: 1px solid #eee;
                position: relative;
                cursor: pointer;
                .down {
                    color: #bef4a7;
                }
                .up {
                    color: #d93a26;
                }
                .name {
                    font-size: 14px;
                    margin-top: 5px;
                    margin-left: 10px;
                }
                .money {
                    font-size: 16px;
                    color: #a1c87f;
                    font-weight: bold;
                    margin-left: 20px;
                    margin-top: 5px;
                    margin-bottom: 5px;
                }
                .jsrContent {
                    background-color: rgba(34, 49, 103, 0.3);
                    width: 90%;
                    margin-left: 5%;
                    border-radius: 6px;
                }
                .jsr {
                    font-size: 12px;
                    margin-left: 10px;
                    height: 22px;
                    line-height: 22px;
                    display: flex;
                    label {
                        font-size: 14px;
                        width: 50px;
                        color: #fff;
                    }
                    span {
                        font-size: 14px;
                    }
                    img {
                        float: left;
                        margin: 3px 5px;
                    }
                }
            }
        }
    }
    .rightMain {
        background-color: #fff;
        text-align: center;
        flex: 1;
        padding: 10px;
    }
}

.echarts {
    position: relative;
    background-color: #fff;
    .refresh {
        position: absolute;
        width: 20px;
        right: 20px;
        cursor: pointer;
    }
}
.rightTitle {
    text-align: center;
    margin-bottom: -23px;

    span {
        text-align: center;
        font-weight: bold;
        font-size: 18px;
    }
    label {
        text-align: right;
        float: right;
        color: #3b8cfc;
        margin-right: 15px;
        cursor: pointer;
        font-size: 16px;
    }
    .printer {
        color: #3b8cfc;
    }
    .download {
        color: #3b8cfc;
    }
}
</style>
